import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInWithCustomToken, 
  signInAnonymously, 
  onAuthStateChanged,
  signOut,
  signInWithEmailAndPassword
} from 'firebase/auth';
import { 
  getFirestore, 
  doc, 
  setDoc, 
  getDoc, 
  collection, 
  onSnapshot, 
  addDoc, 
  updateDoc, 
  deleteDoc 
} from 'firebase/firestore';
import { 
  Play, 
  Pause, 
  Music, 
  Calendar, 
  Image as ImageIcon, 
  Mail, 
  Lock, 
  LogOut, 
  Plus, 
  Trash2, 
  Edit, 
  Check, 
  ExternalLink, 
  Volume2, 
  Instagram, 
  Youtube, 
  Send,
  X
} from 'lucide-react';

// Инициализация Firebase. 
// При развертывании на Firebase Hosting эти переменные будут автоматически заменяться вашими реальными данными.
const firebaseConfig = typeof __firebase_config !== 'undefined' 
  ? JSON.parse(__firebase_config) 
  : {
      apiKey: "",
      authDomain: "artist-portfolio-demo.firebaseapp.com",
      projectId: "artist-portfolio-demo",
      storageBucket: "artist-portfolio-demo.appspot.com",
      messagingSenderId: "123456789",
      appId: "1:123456789:web:abcdef"
    };

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'artist-portfolio';

export default function App() {
  // Состояние авторизации
  const [user, setUser] = useState(null);
  const [isAdmin, setIsAdmin] = useState(false);
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loginError, setLoginError] = useState('');

  // Активная вкладка на сайте
  const [activeTab, setActiveTab] = useState('home');

  // Динамические данные из Firestore
  const [tracks, setTracks] = useState([]);
  const [concerts, setConcerts] = useState([]);
  const [photos, setPhotos] = useState([]);
  const [bio, setBio] = useState({
    name: 'NEON ECHO',
    genre: 'Synthwave / Indie Electronic',
    about: 'Музыкальный проект, вдохновленный ночным мегаполисом, неоновыми огнями 80-х и глубоким современным басом. Каждое выступление — это аудиовизуальное погружение в атмосферу бесконечной ночи.',
    avatar: 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?auto=format&fit=crop&w=800&q=80',
    heroBg: 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&w=1920&q=80'
  });

  // Состояние воспроизведения музыки
  const [currentTrack, setCurrentTrack] = useState(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const audioRef = useRef(null);

  // Формы редактирования (Admin Mode)
  const [isEditingBio, setIsEditingBio] = useState(false);
  const [editedBio, setEditedBio] = useState({ ...bio });
  const [newTrack, setNewTrack] = useState({ title: '', album: '', duration: '', audioUrl: '', coverUrl: '', spotify: '', yandex: '' });
  const [newConcert, setNewConcert] = useState({ date: '', city: '', venue: '', ticketUrl: '', isSoldOut: false });
  const [newPhoto, setNewPhoto] = useState({ url: '', description: '' });

  // Лайтбокс для просмотра фото
  const [selectedPhoto, setSelectedPhoto] = useState(null);

  // Обратная связь
  const [contactForm, setContactForm] = useState({ name: '', email: '', message: '' });
  const [contactSent, setContactSent] = useState(false);

  // 1. Аутентификация (Правило №3)
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (error) {
        console.error("Ошибка аутентификации:", error);
      }
    };
    initAuth();

    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      // Если вошел анонимно — он гость. Если под email/password (админ) — даем права
      if (currentUser && !currentUser.isAnonymous) {
        setIsAdmin(true);
      } else {
        setIsAdmin(false);
      }
    });
    return () => unsubscribe();
  }, []);

  // 2. Получение данных из Firestore в реальном времени (Правило №1 и №2)
  useEffect(() => {
    if (!user) return; // Защита от запросов без авторизации

    // Публичные коллекции по строгому пути /artifacts/{appId}/public/data/{collection}
    const tracksCollection = collection(db, 'artifacts', appId, 'public', 'data', 'tracks');
    const concertsCollection = collection(db, 'artifacts', appId, 'public', 'data', 'concerts');
    const photosCollection = collection(db, 'artifacts', appId, 'public', 'data', 'photos');
    const bioDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'bio', 'main');

    // Слушаем треки
    const unsubTracks = onSnapshot(tracksCollection, (snapshot) => {
      const list = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setTracks(list);
    }, (error) => console.error("Ошибка получения треков:", error));

    // Слушаем концерты
    const unsubConcerts = onSnapshot(concertsCollection, (snapshot) => {
      const list = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      // Сортируем даты в памяти, избегая сложных запросов Firestore (Правило №2)
      list.sort((a, b) => new Date(a.date) - new Date(b.date));
      setConcerts(list);
    }, (error) => console.error("Ошибка получения концертов:", error));

    // Слушаем галерею
    const unsubPhotos = onSnapshot(photosCollection, (snapshot) => {
      const list = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setPhotos(list);
    }, (error) => console.error("Ошибка получения фото:", error));

    // Слушаем био/информацию об артисте
    const unsubBio = onSnapshot(bioDocRef, (docSnap) => {
      if (docSnap.exists()) {
        const data = docSnap.data();
        setBio(data);
        setEditedBio(data);
      } else {
        // Если документа еще нет, создаем дефолтный
        setDoc(bioDocRef, bio);
      }
    }, (error) => console.error("Ошибка получения био:", error));

    return () => {
      unsubTracks();
      unsubConcerts();
      unsubPhotos();
      unsubBio();
    };
  }, [user]);

  // Воспроизведение аудио локально
  const handlePlayPause = (track) => {
    if (currentTrack?.id === track.id) {
      if (isPlaying) {
        audioRef.current.pause();
        setIsPlaying(false);
      } else {
        audioRef.current.play().catch(e => console.log("Ошибка воспроизведения:", e));
        setIsPlaying(true);
      }
    } else {
      setCurrentTrack(track);
      setIsPlaying(true);
      // Устанавливаем аудиофайл (если URL нет, используем демонстрационный беззвучный или фоновый трек)
      const src = track.audioUrl || "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
      if (audioRef.current) {
        audioRef.current.src = src;
        audioRef.current.play().catch(e => console.log("Ошибка воспроизведения:", e));
      }
    }
  };

  // Авторизация администратора (обычный вход по почте/паролю)
  const handleLogin = async (e) => {
    e.preventDefault();
    setLoginError('');
    try {
      await signInWithEmailAndPassword(auth, email, password);
      setShowLoginModal(false);
      setEmail('');
      setPassword('');
    } catch (error) {
      setLoginError('Неверный логин или пароль. Обратите внимание, что для создания админа вам нужно сначала зарегистрировать его в Firebase Console.');
    }
  };

  // Выход из админки (возврат в анонимный режим чтения)
  const handleLogout = async () => {
    try {
      await signOut(auth);
      await signInAnonymously(auth);
    } catch (error) {
      console.error("Ошибка выхода:", error);
    }
  };

  // --- Функции администратора для работы с БД (Firestore) ---

  // Сохранить био
  const saveBio = async () => {
    const bioDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'bio', 'main');
    await setDoc(bioDocRef, editedBio);
    setIsEditingBio(false);
  };

  // Добавить трек
  const addTrack = async (e) => {
    e.preventDefault();
    if (!newTrack.title) return;
    const tracksCollection = collection(db, 'artifacts', appId, 'public', 'data', 'tracks');
    await addDoc(tracksCollection, {
      ...newTrack,
      audioUrl: newTrack.audioUrl || "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
      coverUrl: newTrack.coverUrl || "https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?auto=format&fit=crop&w=400&q=80"
    });
    setNewTrack({ title: '', album: '', duration: '', audioUrl: '', coverUrl: '', spotify: '', yandex: '' });
  };

  // Удалить трек
  const deleteTrack = async (id) => {
    const trackDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'tracks', id);
    await deleteDoc(trackDocRef);
    if (currentTrack?.id === id) {
      audioRef.current.pause();
      setIsPlaying(false);
      setCurrentTrack(null);
    }
  };

  // Добавить концерт
  const addConcert = async (e) => {
    e.preventDefault();
    if (!newConcert.city || !newConcert.date) return;
    const concertsCollection = collection(db, 'artifacts', appId, 'public', 'data', 'concerts');
    await addDoc(concertsCollection, newConcert);
    setNewConcert({ date: '', city: '', venue: '', ticketUrl: '', isSoldOut: false });
  };

  // Удалить концерт
  const deleteConcert = async (id) => {
    const concertDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'concerts', id);
    await deleteDoc(concertDocRef);
  };

  // Добавить фото
  const addPhoto = async (e) => {
    e.preventDefault();
    if (!newPhoto.url) return;
    const photosCollection = collection(db, 'artifacts', appId, 'public', 'data', 'photos');
    await addDoc(photosCollection, newPhoto);
    setNewPhoto({ url: '', description: '' });
  };

  // Удалить фото
  const deletePhoto = async (id) => {
    const photoDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'photos', id);
    await deleteDoc(photoDocRef);
  };

  // Имитация отправки формы обратной связи
  const handleContactSubmit = (e) => {
    e.preventDefault();
    if (!contactForm.email || !contactForm.message) return;
    setContactSent(true);
    setTimeout(() => {
      setContactSent(false);
      setContactForm({ name: '', email: '', message: '' });
    }, 4000);
  };

  // Вспомогательные данные по умолчанию (если БД пуста)
  const defaultTracks = [
    { id: '1', title: 'Neon Horizon', album: 'Retro City', duration: '3:45', coverUrl: 'https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?auto=format&fit=crop&w=400&q=80', audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' },
    { id: '2', title: 'Midnight Drive', album: 'Nightfall', duration: '4:12', coverUrl: 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?auto=format&fit=crop&w=400&q=80', audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3' },
    { id: '3', title: 'Cyber Pulse', album: 'Future Retro', duration: '3:58', coverUrl: 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&w=400&q=80', audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3' }
  ];

  const defaultConcerts = [
    { id: '1', date: '2026-07-15', city: 'Москва', venue: 'Клуб "Урбан"', ticketUrl: '#', isSoldOut: false },
    { id: '2', date: '2026-07-22', city: 'Санкт-Петербург', venue: 'Космонавт', ticketUrl: '#', isSoldOut: false },
    { id: '3', date: '2026-08-05', city: 'Сочи', venue: 'Зеленый Театр', ticketUrl: '#', isSoldOut: true }
  ];

  const defaultPhotos = [
    { id: '1', url: 'https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?auto=format&fit=crop&w=800&q=80', description: 'Live Сет в Москве' },
    { id: '2', url: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?auto=format&fit=crop&w=800&q=80', description: 'Запись альбома, 2026' },
    { id: '3', url: 'https://images.unsplash.com/photo-1501386761578-eac5c94b800a?auto=format&fit=crop&w=800&q=80', description: 'Фестиваль На открытом воздухе' },
    { id: '4', url: 'https://images.unsplash.com/photo-1506157786151-b8491531f063?auto=format&fit=crop&w=800&q=80', description: 'Промо фотосессия' }
  ];

  const displayTracks = tracks.length > 0 ? tracks : defaultTracks;
  const displayConcerts = concerts.length > 0 ? concerts : defaultConcerts;
  const displayPhotos = photos.length > 0 ? photos : defaultPhotos;

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans flex flex-col justify-between selection:bg-purple-600 selection:text-white">
      {/* Скрытый тег Audio */}
      <audio ref={audioRef} onEnded={() => setIsPlaying(false)} />

      {/* ШАПКА САЙТА */}
      <header className="sticky top-0 z-40 bg-slate-950/80 backdrop-blur-md border-b border-purple-900/40">
        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center space-x-3 cursor-pointer" onClick={() => setActiveTab('home')}>
            <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-purple-600 to-pink-500 flex items-center justify-center animate-pulse">
              <Music className="w-5 h-5 text-white" />
            </div>
            <div>
              <span className="font-bold text-xl tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">
                {bio.name}
              </span>
              <p className="text-[10px] text-purple-300/80 tracking-widest uppercase">{bio.genre}</p>
            </div>
          </div>

          {/* Навигация */}
          <nav className="hidden md:flex items-center space-x-8">
            <button 
              onClick={() => setActiveTab('home')} 
              className={`transition-colors duration-200 text-sm font-medium tracking-wide ${activeTab === 'home' ? 'text-pink-400' : 'text-slate-400 hover:text-white'}`}
            >
              Главная
            </button>
            <button 
              onClick={() => setActiveTab('music')} 
              className={`transition-colors duration-200 text-sm font-medium tracking-wide ${activeTab === 'music' ? 'text-pink-400' : 'text-slate-400 hover:text-white'}`}
            >
              Музыка
            </button>
            <button 
              onClick={() => setActiveTab('concerts')} 
              className={`transition-colors duration-200 text-sm font-medium tracking-wide ${activeTab === 'concerts' ? 'text-pink-400' : 'text-slate-400 hover:text-white'}`}
            >
              Концерты
            </button>
            <button 
              onClick={() => setActiveTab('media')} 
              className={`transition-colors duration-200 text-sm font-medium tracking-wide ${activeTab === 'media' ? 'text-pink-400' : 'text-slate-400 hover:text-white'}`}
            >
              Галерея
            </button>
            <button 
              onClick={() => setActiveTab('contacts')} 
              className={`transition-colors duration-200 text-sm font-medium tracking-wide ${activeTab === 'contacts' ? 'text-pink-400' : 'text-slate-400 hover:text-white'}`}
            >
              Контакты
            </button>
          </nav>

          {/* Кнопка входа для Администратора */}
          <div className="flex items-center space-x-3">
            {isAdmin ? (
              <div className="flex items-center space-x-2 bg-purple-950/60 border border-purple-500/30 px-3 py-1.5 rounded-full">
                <span className="w-2.5 h-2.5 bg-green-500 rounded-full animate-ping"></span>
                <span className="text-xs text-purple-300 font-mono">ADMIN</span>
                <button 
                  onClick={handleLogout} 
                  title="Выйти из админки" 
                  className="text-slate-400 hover:text-pink-400 transition-colors"
                >
                  <LogOut className="w-4 h-4" />
                </button>
              </div>
            ) : (
              <button 
                onClick={() => setShowLoginModal(true)} 
                className="p-2 text-slate-400 hover:text-white hover:bg-slate-900 rounded-full transition-colors"
                title="Вход для администратора"
              >
                <Lock className="w-4 h-4" />
              </button>
            )}
          </div>
        </div>
      </header>

      {/* КНОПКИ НАВИГАЦИИ ДЛЯ МОБИЛЬНЫХ */}
      <div className="md:hidden fixed bottom-4 left-4 right-4 z-40 bg-slate-950/90 backdrop-blur-lg border border-purple-900/50 rounded-full py-3 px-6 flex justify-around shadow-2xl">
        <button onClick={() => setActiveTab('home')} className={`p-1 ${activeTab === 'home' ? 'text-pink-400' : 'text-slate-400'}`}><Music className="w-5 h-5" /></button>
        <button onClick={() => setActiveTab('music')} className={`p-1 ${activeTab === 'music' ? 'text-pink-400' : 'text-slate-400'}`}><Music className="w-5 h-5" /></button>
        <button onClick={() => setActiveTab('concerts')} className={`p-1 ${activeTab === 'concerts' ? 'text-pink-400' : 'text-slate-400'}`}><Calendar className="w-5 h-5" /></button>
        <button onClick={() => setActiveTab('media')} className={`p-1 ${activeTab === 'media' ? 'text-pink-400' : 'text-slate-400'}`}><ImageIcon className="w-5 h-5" /></button>
        <button onClick={() => setActiveTab('contacts')} className={`p-1 ${activeTab === 'contacts' ? 'text-pink-400' : 'text-slate-400'}`}><Mail className="w-5 h-5" /></button>
      </div>

      {/* ОСНОВНОЙ КОНТЕНТ */}
      <main className="flex-grow">
        
        {/* ВКЛАДКА 1: ГЛАВНАЯ (HERO & BIO) */}
        {activeTab === 'home' && (
          <section className="relative">
            {/* Задний фон с параллакс-эффектом */}
            <div 
              className="absolute inset-0 h-[600px] bg-cover bg-center filter brightness-50"
              style={{ backgroundImage: `url(${bio.heroBg})` }}
            >
              <div className="absolute inset-0 bg-gradient-to-b from-slate-950/10 via-slate-950/60 to-slate-950"></div>
            </div>

            <div className="relative max-w-6xl mx-auto px-4 pt-32 pb-24 md:pt-48 flex flex-col md:flex-row items-center gap-12">
              {/* Промо-фото */}
              <div className="w-64 h-64 md:w-80 md:h-80 rounded-2xl overflow-hidden shadow-2xl border-2 border-purple-500/30 transform hover:scale-105 transition-transform duration-500 relative group">
                <img src={bio.avatar} alt="Аватар артиста" className="w-full h-full object-cover" />
                {isAdmin && (
                  <button 
                    onClick={() => setIsEditingBio(true)}
                    className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 flex items-center justify-center text-white transition-opacity duration-200"
                  >
                    <Edit className="w-8 h-8 text-pink-400 mr-2" /> Редактировать
                  </button>
                )}
              </div>

              {/* Информация об артисте */}
              <div className="flex-1 text-center md:text-left">
                <span className="px-4 py-1.5 rounded-full text-xs font-semibold bg-purple-900/40 text-purple-300 border border-purple-500/20 tracking-wider uppercase">
                  Официальный сайт
                </span>
                
                <h1 className="text-4xl md:text-6xl font-extrabold mt-6 tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-purple-200 via-pink-100 to-white">
                  {bio.name}
                </h1>
                
                <p className="text-pink-400 font-medium text-lg md:text-xl mt-2 tracking-widest uppercase">
                  {bio.genre}
                </p>

                <p className="text-slate-300 text-base md:text-lg mt-6 leading-relaxed max-w-xl">
                  {bio.about}
                </p>

                <div className="mt-8 flex flex-wrap gap-4 justify-center md:justify-start">
                  <button 
                    onClick={() => setActiveTab('music')} 
                    className="px-8 py-3 rounded-full bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-500 hover:to-pink-400 font-medium text-sm tracking-wide shadow-lg shadow-purple-500/20 transform hover:-translate-y-0.5 transition duration-200 flex items-center space-x-2"
                  >
                    <Play className="w-4 h-4 text-white" />
                    <span>Слушать треки</span>
                  </button>
                  <button 
                    onClick={() => setActiveTab('concerts')} 
                    className="px-8 py-3 rounded-full bg-slate-900/80 border border-purple-500/30 hover:bg-slate-800 font-medium text-sm tracking-wide transition duration-200 flex items-center space-x-2"
                  >
                    <Calendar className="w-4 h-4 text-pink-400" />
                    <span>Купить билеты</span>
                  </button>
                </div>
              </div>
            </div>

            {/* Блок быстрого аудиоплеера */}
            <div className="max-w-4xl mx-auto px-4 pb-12">
              <div className="bg-slate-900/60 border border-purple-900/40 backdrop-blur-md rounded-2xl p-6 flex flex-col md:flex-row items-center justify-between gap-6">
                <div className="flex items-center space-x-4">
                  <div className="w-16 h-16 rounded-xl bg-purple-900/50 overflow-hidden flex-shrink-0">
                    <img 
                      src={currentTrack ? currentTrack.coverUrl : (displayTracks[0]?.coverUrl || '')} 
                      alt="Обложка" 
                      className="w-full h-full object-cover" 
                    />
                  </div>
                  <div>
                    <span className="text-[10px] text-pink-400 font-semibold tracking-wider uppercase">Сейчас играет</span>
                    <h3 className="font-semibold text-lg text-slate-100">{currentTrack ? currentTrack.title : (displayTracks[0]?.title || 'Выберите трек')}</h3>
                    <p className="text-sm text-slate-400">{currentTrack ? currentTrack.album : (displayTracks[0]?.album || 'Альбом')}</p>
                  </div>
                </div>

                <div className="flex items-center space-x-6">
                  <button 
                    onClick={() => handlePlayPause(currentTrack || displayTracks[0])}
                    className="w-12 h-12 rounded-full bg-pink-500 hover:bg-pink-400 flex items-center justify-center text-white shadow-md shadow-pink-500/20 transition-all transform active:scale-95"
                  >
                    {isPlaying ? <Pause className="w-5 h-5 fill-white" /> : <Play className="w-5 h-5 fill-white translate-x-0.5" />}
                  </button>
                  <div className="flex items-center space-x-2 text-slate-400">
                    <Volume2 className="w-4 h-4" />
                    <span className="text-xs font-mono">{currentTrack ? currentTrack.duration : (displayTracks[0]?.duration || '0:00')}</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Модальное окно редактирования Биографии (Только для Админа) */}
            {isEditingBio && (
              <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4">
                <div className="bg-slate-900 border border-purple-500/30 rounded-2xl max-w-xl w-full p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="font-bold text-xl text-pink-400">Редактировать информацию</h3>
                    <button onClick={() => setIsEditingBio(false)} className="text-slate-400 hover:text-white"><X className="w-5 h-5" /></button>
                  </div>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-xs font-semibold text-slate-400 mb-1">Имя артиста / Название группы</label>
                      <input 
                        type="text" 
                        value={editedBio.name} 
                        onChange={(e) => setEditedBio({ ...editedBio, name: e.target.value })}
                        className="w-full bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-white focus:outline-none focus:border-pink-500"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-semibold text-slate-400 mb-1">Жанр</label>
                      <input 
                        type="text" 
                        value={editedBio.genre} 
                        onChange={(e) => setEditedBio({ ...editedBio, genre: e.target.value })}
                        className="w-full bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-white focus:outline-none focus:border-pink-500"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-semibold text-slate-400 mb-1">Описание / О себе</label>
                      <textarea 
                        rows="4"
                        value={editedBio.about} 
                        onChange={(e) => setEditedBio({ ...editedBio, about: e.target.value })}
                        className="w-full bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-white focus:outline-none focus:border-pink-500"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-semibold text-slate-400 mb-1">Ссылка на фото (URL)</label>
                      <input 
                        type="text" 
                        value={editedBio.avatar} 
                        onChange={(e) => setEditedBio({ ...editedBio, avatar: e.target.value })}
                        className="w-full bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-white focus:outline-none focus:border-pink-500 text-xs font-mono"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-semibold text-slate-400 mb-1">Ссылка на фоновое изображение (URL)</label>
                      <input 
                        type="text" 
                        value={editedBio.heroBg} 
                        onChange={(e) => setEditedBio({ ...editedBio, heroBg: e.target.value })}
                        className="w-full bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-white focus:outline-none focus:border-pink-500 text-xs font-mono"
                      />
                    </div>
                  </div>
                  <div className="flex justify-end space-x-3 mt-6">
                    <button 
                      onClick={() => setIsEditingBio(false)} 
                      className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl"
                    >
                      Отмена
                    </button>
                    <button 
                      onClick={saveBio} 
                      className="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-500 hover:to-pink-400 text-white rounded-xl"
                    >
                      Сохранить
                    </button>
                  </div>
                </div>
              </div>
            )}
          </section>
        )}

        {/* ВКЛАДКА 2: МУЗЫКА (ДИСКОГРАФИЯ) */}
        {activeTab === 'music' && (
          <section className="max-w-6xl mx-auto px-4 py-12">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-extrabold tracking-wide uppercase">
                Релизы и Треки
              </h2>
              <div className="w-16 h-1 bg-pink-500 mx-auto mt-3"></div>
            </div>

            {/* Панель добавления трека для Админа */}
            {isAdmin && (
              <form onSubmit={addTrack} className="bg-purple-950/20 border border-purple-500/20 rounded-2xl p-6 mb-12 max-w-2xl mx-auto">
                <h3 className="font-bold text-lg text-pink-400 mb-4 flex items-center">
                  <Plus className="w-5 h-5 mr-2" /> Добавить новый трек
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <input 
                    type="text" 
                    placeholder="Название трека" 
                    value={newTrack.title} 
                    onChange={(e) => setNewTrack({ ...newTrack, title: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:border-pink-500"
                    required
                  />
                  <input 
                    type="text" 
                    placeholder="Альбом/Сингл" 
                    value={newTrack.album} 
                    onChange={(e) => setNewTrack({ ...newTrack, album: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:border-pink-500"
                  />
                  <input 
                    type="text" 
                    placeholder="Длительность (например, 3:45)" 
                    value={newTrack.duration} 
                    onChange={(e) => setNewTrack({ ...newTrack, duration: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:border-pink-500"
                  />
                  <input 
                    type="text" 
                    placeholder="Ссылка на обложку (URL)" 
                    value={newTrack.coverUrl} 
                    onChange={(e) => setNewTrack({ ...newTrack, coverUrl: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-xs text-white focus:outline-none focus:border-pink-500 font-mono"
                  />
                  <input 
                    type="text" 
                    placeholder="Ссылка на аудиофайл .mp3 (URL)" 
                    value={newTrack.audioUrl} 
                    onChange={(e) => setNewTrack({ ...newTrack, audioUrl: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-xs text-white focus:outline-none focus:border-pink-500 font-mono col-span-1 md:col-span-2"
                  />
                  <input 
                    type="text" 
                    placeholder="Ссылка на Яндекс Музыку" 
                    value={newTrack.yandex} 
                    onChange={(e) => setNewTrack({ ...newTrack, yandex: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:border-pink-500"
                  />
                  <input 
                    type="text" 
                    placeholder="Ссылка на Spotify" 
                    value={newTrack.spotify} 
                    onChange={(e) => setNewTrack({ ...newTrack, spotify: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:border-pink-500"
                  />
                </div>
                <button 
                  type="submit" 
                  className="mt-4 w-full bg-gradient-to-r from-purple-600 to-pink-500 py-2.5 rounded-xl text-sm font-semibold hover:from-purple-500 hover:to-pink-400 transition"
                >
                  Добавить
                </button>
              </form>
            )}

            {/* Список треков */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {displayTracks.map((track) => (
                <div 
                  key={track.id} 
                  className={`bg-slate-900/50 border rounded-2xl p-4 flex flex-col justify-between transition-all duration-300 transform hover:-translate-y-1 ${
                    currentTrack?.id === track.id ? 'border-pink-500/50 bg-gradient-to-br from-slate-900 to-purple-950/30' : 'border-purple-900/30'
                  }`}
                >
                  <div className="flex items-start space-x-4">
                    <div className="w-24 h-24 rounded-xl overflow-hidden relative group flex-shrink-0">
                      <img src={track.coverUrl} alt={track.title} className="w-full h-full object-cover" />
                      <button 
                        onClick={() => handlePlayPause(track)}
                        className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity"
                      >
                        {isPlaying && currentTrack?.id === track.id ? (
                          <Pause className="w-8 h-8 text-white fill-white" />
                        ) : (
                          <Play className="w-8 h-8 text-white fill-white" />
                        )}
                      </button>
                    </div>

                    <div className="flex-1 min-w-0">
                      <h4 className="font-bold text-lg text-slate-100 truncate">{track.title}</h4>
                      <p className="text-sm text-slate-400 truncate">{track.album}</p>
                      <span className="text-xs text-purple-400 font-mono block mt-1">{track.duration}</span>
                      
                      <div className="flex items-center space-x-3 mt-3">
                        {track.yandex && (
                          <a href={track.yandex} target="_blank" rel="noopener noreferrer" className="text-xs text-yellow-500 hover:underline flex items-center">
                            Я.Музыка <ExternalLink className="w-3 h-3 ml-0.5" />
                          </a>
                        )}
                        {track.spotify && (
                          <a href={track.spotify} target="_blank" rel="noopener noreferrer" className="text-xs text-green-500 hover:underline flex items-center">
                            Spotify <ExternalLink className="w-3 h-3 ml-0.5" />
                          </a>
                        )}
                      </div>
                    </div>
                  </div>

                  {/* Опции Админа */}
                  {isAdmin && (
                    <div className="mt-4 pt-3 border-t border-purple-950/60 flex justify-end">
                      <button 
                        onClick={() => deleteTrack(track.id)} 
                        className="text-red-400 hover:text-red-300 text-xs flex items-center space-x-1"
                      >
                        <Trash2 className="w-3.5 h-3.5" /> <span>Удалить трек</span>
                      </button>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </section>
        )}

        {/* ВКЛАДКА 3: КОНЦЕРТЫ (АФИША) */}
        {activeTab === 'concerts' && (
          <section className="max-w-4xl mx-auto px-4 py-12">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-extrabold tracking-wide uppercase">
                Концертный тур
              </h2>
              <div className="w-16 h-1 bg-pink-500 mx-auto mt-3"></div>
            </div>

            {/* Панель добавления концерта для Админа */}
            {isAdmin && (
              <form onSubmit={addConcert} className="bg-purple-950/20 border border-purple-500/20 rounded-2xl p-6 mb-12">
                <h3 className="font-bold text-lg text-pink-400 mb-4 flex items-center">
                  <Plus className="w-5 h-5 mr-2" /> Добавить выступление
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <input 
                    type="date" 
                    value={newConcert.date} 
                    onChange={(e) => setNewConcert({ ...newConcert, date: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:border-pink-500"
                    required
                  />
                  <input 
                    type="text" 
                    placeholder="Город" 
                    value={newConcert.city} 
                    onChange={(e) => setNewConcert({ ...newConcert, city: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:border-pink-500"
                    required
                  />
                  <input 
                    type="text" 
                    placeholder="Площадка / Клуб" 
                    value={newConcert.venue} 
                    onChange={(e) => setNewConcert({ ...newConcert, venue: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:border-pink-500"
                    required
                  />
                  <input 
                    type="text" 
                    placeholder="Ссылка на билеты (URL)" 
                    value={newConcert.ticketUrl} 
                    onChange={(e) => setNewConcert({ ...newConcert, ticketUrl: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:border-pink-500"
                  />
                  <label className="flex items-center space-x-2 text-sm text-slate-400 col-span-1 md:col-span-2">
                    <input 
                      type="checkbox" 
                      checked={newConcert.isSoldOut} 
                      onChange={(e) => setNewConcert({ ...newConcert, isSoldOut: e.target.checked })}
                      className="rounded bg-slate-950 border-purple-900"
                    />
                    <span>Все билеты проданы (Sold Out)</span>
                  </label>
                </div>
                <button 
                  type="submit" 
                  className="mt-4 w-full bg-gradient-to-r from-purple-600 to-pink-500 py-2.5 rounded-xl text-sm font-semibold hover:from-purple-500 hover:to-pink-400 transition"
                >
                  Добавить
                </button>
              </form>
            )}

            {/* Список выступлений */}
            <div className="space-y-4">
              {displayConcerts.length === 0 ? (
                <div className="text-center py-12 text-slate-500">События пока не анонсированы.</div>
              ) : (
                displayConcerts.map((concert) => {
                  const dateObj = new Date(concert.date);
                  const formattedDate = dateObj.toLocaleDateString('ru-RU', {
                    day: 'numeric',
                    month: 'long',
                    year: 'numeric'
                  });

                  return (
                    <div 
                      key={concert.id} 
                      className="bg-slate-900/40 border border-purple-900/20 rounded-2xl p-6 flex flex-col md:flex-row md:items-center justify-between gap-6 hover:bg-slate-900/80 transition-colors"
                    >
                      <div className="flex-1">
                        <span className="text-xs font-mono text-pink-400 tracking-wider block mb-1">
                          {formattedDate}
                        </span>
                        <h4 className="font-extrabold text-2xl text-slate-100">{concert.city}</h4>
                        <p className="text-slate-400 mt-1">{concert.venue}</p>
                      </div>

                      <div className="flex items-center space-x-4">
                        {concert.isSoldOut ? (
                          <span className="px-5 py-2.5 rounded-full bg-slate-800 text-slate-500 font-bold text-sm uppercase tracking-wide cursor-not-allowed">
                            SOLD OUT
                          </span>
                        ) : (
                          <a 
                            href={concert.ticketUrl} 
                            target="_blank" 
                            rel="noopener noreferrer" 
                            className="px-6 py-2.5 rounded-full bg-pink-600 hover:bg-pink-500 font-bold text-sm tracking-wide text-white transition-colors flex items-center space-x-1.5"
                          >
                            <span>Билеты</span> <ExternalLink className="w-3.5 h-3.5" />
                          </a>
                        )}

                        {isAdmin && (
                          <button 
                            onClick={() => deleteConcert(concert.id)} 
                            className="p-2.5 bg-red-950/50 hover:bg-red-900 border border-red-500/30 rounded-xl text-red-400 transition-colors"
                            title="Удалить концерт"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        )}
                      </div>
                    </div>
                  );
                })
              )}
            </div>
          </section>
        )}

        {/* ВКЛАДКА 4: ГАЛЕРЕЯ */}
        {activeTab === 'media' && (
          <section className="max-w-6xl mx-auto px-4 py-12">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-extrabold tracking-wide uppercase">
                Медиа Галерея
              </h2>
              <div className="w-16 h-1 bg-pink-500 mx-auto mt-3"></div>
            </div>

            {/* Панель добавления фото для Админа */}
            {isAdmin && (
              <form onSubmit={addPhoto} className="bg-purple-950/20 border border-purple-500/20 rounded-2xl p-6 mb-12 max-w-2xl mx-auto">
                <h3 className="font-bold text-lg text-pink-400 mb-4 flex items-center">
                  <Plus className="w-5 h-5 mr-2" /> Добавить фото в галерею
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <input 
                    type="text" 
                    placeholder="Ссылка на изображение (URL)" 
                    value={newPhoto.url} 
                    onChange={(e) => setNewPhoto({ ...newPhoto, url: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-xs text-white focus:outline-none focus:border-pink-500 font-mono col-span-1 md:col-span-2"
                    required
                  />
                  <input 
                    type="text" 
                    placeholder="Описание (например, Москва, 2026)" 
                    value={newPhoto.description} 
                    onChange={(e) => setNewPhoto({ ...newPhoto, description: e.target.value })}
                    className="bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:border-pink-500 col-span-1 md:col-span-2"
                  />
                </div>
                <button 
                  type="submit" 
                  className="mt-4 w-full bg-gradient-to-r from-purple-600 to-pink-500 py-2.5 rounded-xl text-sm font-semibold hover:from-purple-500 hover:to-pink-400 transition"
                >
                  Добавить в галерею
                </button>
              </form>
            )}

            {/* Сетка фото */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {displayPhotos.map((photo) => (
                <div 
                  key={photo.id} 
                  className="group relative bg-slate-900 rounded-2xl overflow-hidden aspect-square border border-purple-900/20 cursor-pointer shadow-lg hover:shadow-purple-500/10 transition-all duration-300"
                  onClick={() => setSelectedPhoto(photo)}
                >
                  <img src={photo.url} alt={photo.description} className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-4">
                    <p className="text-sm font-semibold text-slate-100">{photo.description || 'Live выступление'}</p>
                  </div>

                  {isAdmin && (
                    <button 
                      onClick={(e) => {
                        e.stopPropagation(); // Предотвращаем открытие лайтбокса при удалении
                        deletePhoto(photo.id);
                      }}
                      className="absolute top-2 right-2 p-2 bg-red-600 hover:bg-red-500 text-white rounded-lg opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200"
                      title="Удалить фото"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  )}
                </div>
              ))}
            </div>

            {/* Лайтбокс для просмотра фото */}
            {selectedPhoto && (
              <div 
                className="fixed inset-0 z-50 bg-black/95 backdrop-blur-sm flex items-center justify-center p-4"
                onClick={() => setSelectedPhoto(null)}
              >
                <button className="absolute top-4 right-4 text-white hover:text-pink-400 p-2"><X className="w-8 h-8" /></button>
                <div className="max-w-4xl max-h-[85vh] flex flex-col items-center">
                  <img src={selectedPhoto.url} alt="Увеличено" className="max-w-full max-h-[75vh] object-contain rounded-lg shadow-2xl border border-purple-500/30" />
                  <p className="text-slate-300 text-center mt-4 text-lg font-medium">{selectedPhoto.description}</p>
                </div>
              </div>
            )}
          </section>
        )}

        {/* ВКЛАДКА 5: КОНТАКТЫ */}
        {activeTab === 'contacts' && (
          <section className="max-w-4xl mx-auto px-4 py-12">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-extrabold tracking-wide uppercase">
                Сотрудничество и Контакты
              </h2>
              <div className="w-16 h-1 bg-pink-500 mx-auto mt-3"></div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
              {/* Контактные данные и соцсети */}
              <div className="space-y-6">
                <h3 className="font-extrabold text-2xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">
                  Букинг & Менеджмент
                </h3>
                <p className="text-slate-300 leading-relaxed">
                  По вопросам организации выступлений, участия в фестивалях, рекламы и сотрудничества пишите на нашу почту или в соцсети.
                </p>

                <div className="space-y-4">
                  <div className="flex items-center space-x-3 text-slate-300">
                    <Mail className="w-5 h-5 text-pink-400" />
                    <span>booking@neonecho.music</span>
                  </div>
                  <div className="flex items-center space-x-3 text-slate-300">
                    <ExternalLink className="w-5 h-5 text-pink-400" />
                    <span>Пресс-кит (Download EPK)</span>
                  </div>
                </div>

                <div className="pt-6 border-t border-purple-950/40">
                  <h4 className="text-sm font-semibold tracking-wider text-slate-400 uppercase mb-4">Наши соцсети</h4>
                  <div className="flex space-x-4">
                    <a href="#" className="w-12 h-12 rounded-full bg-slate-900 border border-purple-900/30 hover:border-pink-500/50 flex items-center justify-center text-slate-400 hover:text-pink-400 transition-colors">
                      <Instagram className="w-5 h-5" />
                    </a>
                    <a href="#" className="w-12 h-12 rounded-full bg-slate-900 border border-purple-900/30 hover:border-pink-500/50 flex items-center justify-center text-slate-400 hover:text-pink-400 transition-colors">
                      <Youtube className="w-5 h-5" />
                    </a>
                    <a href="#" className="w-12 h-12 rounded-full bg-slate-900 border border-purple-900/30 hover:border-pink-500/50 flex items-center justify-center text-slate-400 hover:text-pink-400 transition-colors">
                      <Send className="w-5 h-5" />
                    </a>
                  </div>
                </div>
              </div>

              {/* Форма обратной связи */}
              <div className="bg-slate-900/40 border border-purple-900/20 rounded-2xl p-6 shadow-xl">
                <h3 className="font-bold text-xl text-slate-100 mb-6">Написать нам</h3>
                {contactSent ? (
                  <div className="bg-green-950/40 border border-green-500/30 rounded-xl p-6 text-center">
                    <Check className="w-10 h-10 text-green-400 mx-auto mb-3" />
                    <h4 className="font-bold text-green-400">Сообщение отправлено!</h4>
                    <p className="text-sm text-slate-300 mt-2">Менеджер свяжется с вами в ближайшее время.</p>
                  </div>
                ) : (
                  <form onSubmit={handleContactSubmit} className="space-y-4">
                    <div>
                      <label className="block text-xs font-semibold text-slate-400 mb-1">Ваше имя</label>
                      <input 
                        type="text" 
                        value={contactForm.name} 
                        onChange={(e) => setContactForm({ ...contactForm, name: e.target.value })}
                        className="w-full bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-pink-500"
                        placeholder="Александр"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-semibold text-slate-400 mb-1">Email для связи</label>
                      <input 
                        type="email" 
                        value={contactForm.email} 
                        onChange={(e) => setContactForm({ ...contactForm, email: e.target.value })}
                        className="w-full bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-pink-500"
                        placeholder="your@email.com"
                        required
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-semibold text-slate-400 mb-1">Текст сообщения</label>
                      <textarea 
                        rows="4"
                        value={contactForm.message} 
                        onChange={(e) => setContactForm({ ...contactForm, message: e.target.value })}
                        className="w-full bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-pink-500"
                        placeholder="Предложение о сотрудничестве..."
                        required
                      />
                    </div>
                    <button 
                      type="submit" 
                      className="w-full py-3 bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-500 hover:to-pink-400 font-bold text-sm text-white rounded-xl tracking-wider transition"
                    >
                      Отправить
                    </button>
                  </form>
                )}
              </div>
            </div>
          </section>
        )}

      </main>

      {/* ФУТЕР */}
      <footer className="bg-slate-950 border-t border-purple-900/20 py-8 text-center pb-24 md:pb-8">
        <div className="max-w-6xl mx-auto px-4 text-slate-500 text-xs space-y-2">
          <p>© {new Date().getFullYear()} {bio.name}. Все права защищены.</p>
          <p>Сайт работает на базе Google Firebase & React</p>
        </div>
      </footer>

      {/* МОДАЛЬНОЕ ОКНО ВХОДА ДЛЯ АДМИНИСТРАТОРА */}
      {showLoginModal && (
        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-slate-900 border border-purple-500/30 rounded-2xl max-w-sm w-full p-6">
            <div className="flex justify-between items-center mb-6">
              <h3 className="font-bold text-lg text-pink-400 flex items-center">
                <Lock className="w-5 h-5 mr-2" /> Вход в панель управления
              </h3>
              <button onClick={() => setShowLoginModal(false)} className="text-slate-400 hover:text-white"><X className="w-5 h-5" /></button>
            </div>

            {loginError && (
              <p className="text-xs text-red-400 bg-red-950/30 border border-red-500/20 p-3 rounded-lg mb-4 leading-relaxed">
                {loginError}
              </p>
            )}

            <form onSubmit={handleLogin} className="space-y-4">
              <div>
                <label className="block text-xs font-semibold text-slate-400 mb-1">Email администратора</label>
                <input 
                  type="email" 
                  value={email} 
                  onChange={(e) => setEmail(e.target.value)}
                  className="w-full bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-pink-500"
                  placeholder="admin@myband.ru"
                  required
                />
              </div>
              <div>
                <label className="block text-xs font-semibold text-slate-400 mb-1">Пароль</label>
                <input 
                  type="password" 
                  value={password} 
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full bg-slate-950 border border-purple-900/50 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-pink-500"
                  placeholder="••••••••"
                  required
                />
              </div>
              <button 
                type="submit" 
                className="w-full bg-gradient-to-r from-purple-600 to-pink-500 py-2.5 rounded-xl text-sm font-semibold hover:from-purple-500 hover:to-pink-400 transition"
              >
                Войти как админ
              </button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}